<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        #div1{
            height: 500px;
            width: 500px;
        }
        #div1 input{
          
        }
        #div1 input.active{
            background-color: #4CAE09;
        }
        #div1 div{
            width: 300px;
            height:200px;
            display: none;
        }
        #div1 div.active1{
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="div1">
    <input type="button" value="选项一">
    <input type="button" value="选项二">
    <input type="button" value="选项三">
    <div class="active1" style="display: block">选项一</div>
    <div>选项二</div>
    <div>选项三</div>
</div>
</body>
<script>
    //使用面向对象实现选项卡
    window.onload= function () {
      new load('div1');
    };
    
    function load(id) {     //构造函数
        var _this=this;       //this指当前的新建对象,div1
        var oDiv = document.getElementById(id);
        this.aBtn = document.getElementsByTagName('input');    //abtn变为当前属性
        this.aDiv = oDiv.getElementsByTagName('div');
        for (var i = 0; i < this.aBtn.length; i++) {
            this.aBtn[i].index = i;
            this.aBtn[i].onclick = function() {
                _this.click(this);     //this指abtn[i]
            }
        }
    }
   load.prototype.click= function(oBtn) {     //用原型添加方法
        for(var j=0;j<this.aBtn.length;j++){   //this指div1
            this.aBtn[j].className='';
            this.aDiv[j].style.display='none';
        }
        this.className='active';
        this.aDiv[oBtn.index].style.display='block';
        this.aDiv[oBtn.index].className='active1';
    }

</script>
</html>
